<!--
	仅供技术交流，使用产生的一切后果与本人无关
	欢迎反馈 本人QQ：2632790902
		--by:无痕  2015/7/12
-->

<!doctype html>
<html>
	<head>
		<!--设置页面编码为utf-8-->
		<meta charset="UTF-8">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>潭州之歌-相伴潭州</title>
		
		<style type="text/css">
			*{margin:0;padding:0;font-size:16px}
			.lrc{margin:0 auto;width:350px;padding-top:25px;}
			.lrc ul{list-style:none;text-align:center;height:350px;background:#EEE;overflow: hidden}
			.lrc ul li{font-size:14px;line-height:20px;}
			.lrc ul li.play{font-size:18px;line-height:30px;color:#66f}
			.lrc dl dt.info{font-size:12px;float:left;padding-left:20px;color:#22C}
		</style>
	</head>
	<body>
		
		
		<div class="lrc">
			<dl></dl>
			<ul></ul>
		</div>
		<audio id="myaudio" src="./files/1.mp3" controls="controls" hidden="true" preload="auto" >
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript">

			//获得歌词
			function getLrc()
			{
				var file = "[00:00.60]相伴潭州——潭州学院校歌（作词/编曲/演唱：潭州学院）"
				+"[00:01.55]歌词制作：海纳百川（1295812600）"
				+"[00:02.25]古潭州   源流长     书院镇潇湘"
				+"[00:07.26]到如今    薪火旺    再铸新辉煌"
				+"[00:12.86]跨深壑    品类广    传道授业忙"
				+"[00:17.96]攀险峰    传奇唱     续书新篇章"
				+"[00:23.37]风雨同舟  江湖共闯  劈破万里浪"
				+"[00:28.50]相伴有你   日月光芒  将前途照亮"
				+"[00:33.97]夙兴夜寐   心念联网   只为学员想"
				+"[00:39.32]相伴有你   携手图强   奋斗在路上"
				+"[00:46.53]筑平台   伟业昌   悲欢众担当"
				+"[00:56.42]虹之玉   各一方   甘苦齐分尝"
				+"[01:06.30]风雨同舟   江湖共闯   劈破万里浪"
				+"[01:12.43]相伴有你   日月光芒   将前途照亮"
				+"[01:18.00]夙兴夜寐   心念联网   只为学员想"
				+"[01:23.23]相伴有你   携手图强   奋斗在路上"
				+"[01:28.66]相伴有你   携手图强   奋斗在路上"
				+"[01:36.67] ";
				return file;
			}
	
			//生成json对象
			function getJson(lrc)
			{	
				var json="";
				json+="{";
				json+="	'ti':'"+getTi(lrc)+"',";
				json+="	'ar':'"+getAr(lrc)+"',";
				json+="	'al':'"+getAl(lrc)+"',";
				json+="	'lrc':[";
				json+="			"+getConToJsonArray(lrc)+"";
				json+="		 ]";
				json+="}";

				json=eval("("+json+")");

				//排序
				var temp;

				for (var j = 0; j < json.lrc.length;j++ )
				{
					for (var i = 0; i < json.lrc.length - 1; i++)
					{
						if (parseInt(json.lrc[i].time) > parseInt(json.lrc[i + 1].time))
						{
							temp = json.lrc[i];
							json.lrc[i] = json.lrc[i + 1];
							json.lrc[i + 1] = temp;
						}
					}
				}

				return json;
			}
			
			//将歌词正文转换为数组
			function getConToJsonArray(lrc)
			{
				var patt=new RegExp("(\\[\\d{1,2}:\\d{1,2}(.\\d+)?\\])+[\\u4e00-\\u9fa5\\s,\\w+\\(\\)\\:\\：]*","g");
				var result;
	
				var json="";
				//匹配出[00:00.00]xxxx的格式
				while((result = patt.exec(lrc)) != null)
				{
					//处理多个时间对应一段歌词的情况
					var patt2=new RegExp("(\\[\\d{1,2}:\\d{1,2}(.\\d+)?\\])","g");
					var result2;
					var a=result[0].replace(/((\[\d{1,2}:\d{1,2}(.\d+)?\])+)([\u4e00-\u9fa5\s,\w+\(\)\:\：]*)/ig,'$4');
					
					//拼接json数组
					while ((result2 = patt2.exec(result[0])) != null)  {
						 json+="{'time':'"+getTime(result2[1])+"','content':'"+a+"'},";
					}
				}
				return json;
			}

			//把[00:00.00]的时间格式转换为毫秒
			function getTime(time)
			{
				var patt=new RegExp("\\[(\\d{1,2}):(\\d{1,2})(.(\\d{1,2}))?\\]","g");
				var result;
				if ((result = patt.exec(time)) != null)  {
					return result[1]*60*1000+result[2]*1000+result[4]*10;
				}

			}


			//获取歌名
			function getTi(lrc)
			{
				var patt=new RegExp("\\[ti:[\\u4e00-\\u9fa5,\\w+]*\\]","g");
				var result;
				var ti;

				while ((result = patt.exec(lrc)) != null)  {
					 ti=result+"";	 
				}
				if(ti != undefined)
					ti=ti.replace(/\[ti:([\u4e00-\u9fa5\w,]*)\]/ig,'$1');
				else
					ti="未知";
				return ti;
			}

			//获取作者
			function getAr(lrc)
			{
				var patt=new RegExp("\\[ar:[\\u4e00-\\u9fa5,\\w+]*\\]","g");
				var result;
				var ar;

				while ((result = patt.exec(lrc)) != null)  {
					 ar=result+"";	 
				}
				if(ar != undefined)
					ar=ar.replace(/\[ar:([\u4e00-\u9fa5\w,]*)\]/ig,'$1');
				else
					ar="未知";
				return ar;
			}

			//获取专辑名
			function getAl(lrc)
			{
				var patt=new RegExp("\\[al:[\\u4e00-\\u9fa5,\\w+]*\\]","g");
				var result;
				var al;

				while ((result = patt.exec(lrc)) != null)  {
					 al=result+"";	 
				}
				if(al != undefined)
					al=al.replace(/\[al:([\u4e00-\u9fa5\w,]*)\]/ig,'$1');
				else
					al="未知";
				return al;
			}

			//显示歌曲信息
			function showInfo(lrcObj)
			{
				var lrc=$(".lrc dl");
				if(lrcObj.ti)
				{
					lrc.append("<dt class='info'>歌名："+lrcObj.ti+"</dt>");
				}
				if(lrcObj.ar)
				{
					lrc.append("<dt class='info'>歌手："+lrcObj.ar+"</dt>");
				}
				if(lrcObj.al)
				{
					lrc.append("<dt class='info'>专辑："+lrcObj.ti+"</dt>");
				}
				lrc.append("<dt style='clear:left'></dt>");
			}
			
			//显示歌词内容
			function showLrc(lrcObj)
			{
				var lrc=$(".lrc ul");
				for(var i=0;i<lrcObj.lrc.length;i++)
				{
					//如果后面一句歌词与当前歌词相同，当前显示为空行
					if(i!=lrcObj.lrc.length-1)
					{
						if(lrcObj.lrc[i].content==lrcObj.lrc[i+1].content)
						{
							lrc.append("<li>&nbsp;&nbsp;&nbsp;</li>");
						}
						else
						{
							lrc.append("<li>"+lrcObj.lrc[i].content+"</li>");
						}
					}
					else
					{
						lrc.append("<li>"+lrcObj.lrc[i].content+"</li>");
					}
					
				}
			}

			//播放，实现歌词的滚动
			function play(lrcObj)
			{
				$("#myaudio").get(0).play();
				

				var p=0;
				for(var i=0;i<lrcObj.lrc.length;i++)
				{
					//编排歌曲播放的时间
					setTimeout(function(){
						var li=$(".lrc ul li");
						$(li.get(0)).css("margin-top",(parseInt($(li.get(0)).css("margin-top"))-20)+"px");
						li.removeClass("play");
						$(li.get(p)).addClass("play");
						p+=1;
					},lrcObj.lrc[i].time);
				}

			}

			$(function(){
				var lrc=$(".lrc ul");
				var lrcObj = getJson(getLrc());
				showInfo(lrcObj);
				showLrc(lrcObj);
				
				$($(".lrc ul li").get(0)).css("margin-top","160px");
				
				play(lrcObj);
				
			});
		</script>
	</body>
</html>
 